<script setup name="App" lang="ts">
// 目标：ref 获取组件实例
import { ref } from 'vue'
import Child from './Child.vue'

// #1
// 希望指定是 Child 实例类型
// typeof Child => 拿到 Child 组件类型
// 有个 Vue 内置的泛型工具 InstanceType，它又可以拿到组件的实例类型
const childCmp = ref<InstanceType<typeof Child> | null>(null)

// #3
const handleClick = () => {
  // childCmp.value 就是组件实例
  // console.log(childCmp.value)
  childCmp.value && childCmp.value.changeCount(2)
}
</script>
<template>
  <div>
    App
    <button @click="handleClick">获取 Child 实例</button>
    <hr />
    <!-- #2 -->
    <Child ref="childCmp" />
  </div>
</template>
